<template>
	<view>
		<!-- 导航栏 -->
		<uni-nav-bar left-icon="left" title="优惠券" background-color="#2B7DF7" :border="false" :shadow="false"
			color="white" height="150rpx"  @clickLeft="back" />
		<!-- 整个蓝色部分 -->
		<view class="top" style="margin-top: -20rpx;"></view>
		<view class="container">
		    <view 
		      v-for="(tab, index) in tabs" 
		      :key="index"
		      class="tab-item"
		      :class="{ active: currentTab === index }"
		      @click="switchTab(index)"
		    >
		      {{ tab.text }}
		    </view>
		</view>
		<view class="couponList" v-if="currentTab==0">
			<view class="couponItem">
				<image src="/static/车联网服务-08我的-08优惠券-01待使用_slices/椭圆 3 拷贝@3x.png" mode=""></image>
				<view class="coupon_content">
					<view class="top_top">
						<view class="top_left">
							<view>仅限于XX加油站使用</view>
							<view>满200元可用</view>
						</view>
						<view class="top_right">
							<view>￥</view>
							<view>20</view>
						</view>
					</view>
					<view class="bottom_bottom">
						<view>有效期至：2020.04.11—2023.05.11</view>
						<view>去使用</view>
					</view>
				</view>
			</view>
			<view class="couponItem">
				<image src="/static/车联网服务-08我的-08优惠券-01待使用_slices/椭圆 3 拷贝@3x.png" mode=""></image>
				<view class="coupon_content">
					<view class="top_top">
						<view class="top_left">
							<view>仅限于XX加油站使用</view>
							<view>满200元可用</view>
						</view>
						<view class="top_right">
							<view>￥</view>
							<view>20</view>
						</view>
					</view>
					<view class="bottom_bottom">
						<view>有效期至：2020.04.11—2023.05.11</view>
						<view>去使用</view>
					</view>
				</view>
			</view>
			<view class="couponItem">
				<image src="/static/车联网服务-08我的-08优惠券-01待使用_slices/椭圆 3 拷贝@3x.png" mode=""></image>
				<view class="coupon_content">
					<view class="top_top">
						<view class="top_left">
							<view>仅限于XX加油站使用</view>
							<view>满200元可用</view>
						</view>
						<view class="top_right">
							<view>￥</view>
							<view>20</view>
						</view>
					</view>
					<view class="bottom_bottom">
						<view>有效期至：2020.04.11—2023.05.11</view>
						<view>去使用</view>
					</view>
				</view>
			</view>
			
			
			
		</view>
		<view class="couponList" v-if="currentTab==1">
			<view class="couponItem">
				<image src="/static/车联网服务-08我的-08优惠券-02已使用_slices/椭圆 3 拷贝@2x.png" mode=""></image>
				<view class="coupon_content">
					<view class="top_top">
						<view class="top_left">
							<view>仅限于XX加油站使用</view>
							<view>满200元可用</view>
						</view>
						<view class="top_right">
							<view>￥</view>
							<view>20</view>
						</view>
					</view>
					<view class="bottom_bottom">
						<view>有效期至：2020.04.11—2023.05.11</view>
						<view>去使用</view>
					</view>
				</view>
			</view>
			<view class="couponItem">
				<image src="/static/车联网服务-08我的-08优惠券-02已使用_slices/椭圆 3 拷贝@2x.png" mode=""></image>
				<view class="coupon_content">
					<view class="top_top">
						<view class="top_left">
							<view>仅限于XX加油站使用</view>
							<view>满200元可用</view>
						</view>
						<view class="top_right">
							<view>￥</view>
							<view>20</view>
						</view>
					</view>
					<view class="bottom_bottom">
						<view>有效期至：2020.04.11—2023.05.11</view>
						<view>去使用</view>
					</view>
				</view>
			</view>
			<view class="couponItem">
				<image src="/static/车联网服务-08我的-08优惠券-02已使用_slices/椭圆 3 拷贝@2x.png" mode=""></image>
				<view class="coupon_content">
					<view class="top_top">
						<view class="top_left">
							<view>仅限于XX加油站使用</view>
							<view>满200元可用</view>
						</view>
						<view class="top_right">
							<view>￥</view>
							<view>20</view>
						</view>
					</view>
					<view class="bottom_bottom">
						<view>有效期至：2020.04.11—2023.05.11</view>
						<view>去使用</view>
					</view>
				</view>
			</view>
		</view>
		<view class="couponList" v-if="currentTab==2">
			<view class="couponItem">
				<image src="/static/车联网服务-08我的-08优惠券-02已使用_slices/椭圆 3 拷贝@2x.png" mode=""></image>
				<view class="coupon_content">
					<view class="top_top">
						<view class="top_left">
							<view>仅限于XX加油站使用</view>
							<view>满200元可用</view>
						</view>
						<view class="top_right">
							<view>￥</view>
							<view style="text-decoration: line-through;text-decoration-thickness: 4rpx;">20</view>
						</view>
					</view>
					<view class="bottom_bottom">
						<view>有效期至：2020.04.11—2023.05.11</view>
						<view>去使用</view>
					</view>
				</view>
			</view>
			<view class="couponItem">
				<image src="/static/车联网服务-08我的-08优惠券-02已使用_slices/椭圆 3 拷贝@2x.png" mode=""></image>
				<view class="coupon_content">
					<view class="top_top">
						<view class="top_left">
							<view>仅限于XX加油站使用</view>
							<view>满200元可用</view>
						</view>
						<view class="top_right">
							<view>￥</view>
							<view>20</view>
						</view>
					</view>
					<view class="bottom_bottom">
						<view>有效期至：2020.04.11—2023.05.11</view>
						<view>去使用</view>
					</view>
				</view>
			</view>
			<view class="couponItem">
				<image src="/static/车联网服务-08我的-08优惠券-02已使用_slices/椭圆 3 拷贝@2x.png" mode=""></image>
				<view class="coupon_content">
					<view class="top_top">
						<view class="top_left">
							<view>仅限于XX加油站使用</view>
							<view>满200元可用</view>
						</view>
						<view class="top_right">
							<view>￥</view>
							<view>20</view>
						</view>
					</view>
					<view class="bottom_bottom">
						<view>有效期至：2020.04.11—2023.05.11</view>
						<view>去使用</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,  // 当前选中索引
				  tabs: [
					{ id: 0, text: '待使用' },
					{ id: 1, text: '已使用' },
					{ id: 2, text: '已过期' }
				  ]
			}
		},
		methods: {
			switchTab(index) {
			  this.currentTab = index
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped>
	.title {
	    background-image: url('../../../static/车联网服务-00首页_slices/图层 1.png');
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    height: 350rpx;
	    display: flex;
	    padding: 60rpx 300rpx 40rpx 30rpx;
	    justify-content: space-between;
	}
	.title image {
	    color: white;
	    width: 35rpx;
	    height: 35rpx;
	}
	.title view {
	    color: white;
	}
	.top {
		background-color: #2B7DF7;
		height: 240rpx;
		width: 750rpx;
	}
	.container {
	  display: flex;
	  justify-content: space-around;
	  padding: 20rpx;
	  margin-top: -260rpx;
	}
	
	.tab-item {
	  text-align: center;
	  width: 100rpx;
	  padding: 10rpx 0;
	  color: #fff;
	  transition: all 0.3s;
	  border-bottom: 4rpx solid transparent;
	}
	
	.tab-item.active {
	  border-bottom-color: #fff;
	  font-weight: bold;
	}
	.couponList{
		padding: 32rpx 30rpx;
		background-color: #fff;
		width: 650rpx;
		margin: 4rpx auto;
		border-radius: 20rpx;
	}
	.couponItem{
		position: relative;
		margin-bottom: 20rpx;
	}
	.couponItem>image{
		height: 224rpx;
	}
	.coupon_content{
		width: 560rpx;
		position: absolute;
		top: 0rpx;
		color: #fff;
		width: 638rpx;
		padding: 26rpx 0 0;
	}
	.top_top{
		display: flex;
		justify-content: space-between;
		padding-bottom: 30rpx;
		border-bottom: 2rpx dotted #fff;
	}
	.top_left{
		margin-left: 40rpx;
	}
	.top_left>view{
		line-height: 46rpx;
	}
	.top_left>view:nth-child(1){
		font-size: 22rpx;
	}
	.top_left>view:nth-child(2){
		font-size: 32rpx;
	}
	.top_right{
		display: flex;
		margin-right: 40rpx;
	}
	.top_right>view:nth-child(1){
		padding-top: 40rpx;
	}
	.top_right>view:nth-child(2){
		font-size: 70rpx;
	}
	.bottom_bottom{
		font-size: 22rpx;
		display: flex;
		padding: 20rpx 40rpx;
	}
	.bottom_bottom>view:nth-child(1){
		margin-right: auto;
	}
	.bottom_bottom>view:nth-child(2){
		margin-right: 14rpx;
	}
	.bottom_bottom>view:nth-child(2)::after{
		content: '';
		position: absolute;
		transform: translateY(-50%) rotate(45deg);
		width: 10rpx;
		height: 10rpx;
		top: 188rpx;
		border-top: 2rpx solid #fff;
		border-right: 2rpx solid #fff;
		margin-left: 2rpx;
	}
</style>
